<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    
    <div class="form-group">
        <label for="c-title" class="control-label col-xs-12 col-sm-2">课程标题:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-title" class="form-control" name="row[title]" type="text" value="">
        </div>
    </div>

    <!-- 仅工作日示例 -->
    <div class="form-group">
        <label for="c-workday-date" class="control-label col-xs-12 col-sm-2">工作日日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-workday-date" class="form-control datetimepicker" 
                   name="row[workday_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true"
                   data-restriction-config='{"restrictionType":"workdays"}'>
            <span class="help-block">仅允许选择工作日（周一到周五）</span>
        </div>
    </div>

    <!-- 仅周末示例 -->
    <div class="form-group">
        <label for="c-weekend-date" class="control-label col-xs-12 col-sm-2">周末日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-weekend-date" class="form-control datetimepicker" 
                   name="row[weekend_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true"
                   data-restriction-config='{"restrictionType":"weekends"}'>
            <span class="help-block">仅允许选择周末（周六、周日）</span>
        </div>
    </div>

    <!-- 自定义工作日示例 -->
    <div class="form-group">
        <label for="c-custom-date" class="control-label col-xs-12 col-sm-2">自定义工作日:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-custom-date" class="form-control datetimepicker" 
                   name="row[custom_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true"
                   data-restriction-config='{"restrictionType":"custom","allowedWeekdays":[1,3,5]}'>
            <span class="help-block">仅允许选择周一、周三、周五</span>
        </div>
    </div>

    <!-- 指定日期示例 -->
    <div class="form-group">
        <label for="c-specific-date" class="control-label col-xs-12 col-sm-2">指定日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-specific-date" class="form-control datetimepicker" 
                   name="row[specific_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true">
            <span class="help-block">仅允许选择指定的几个日期</span>
        </div>
    </div>

    <!-- 禁用特定日期示例 -->
    <div class="form-group">
        <label for="c-disabled-date" class="control-label col-xs-12 col-sm-2">禁用特定日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-disabled-date" class="form-control datetimepicker" 
                   name="row[disabled_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true">
            <span class="help-block">禁用特定日期，其他日期可选</span>
        </div>
    </div>

    <!-- 动态配置示例 -->
    <div class="form-group">
        <label for="c-dynamic-date" class="control-label col-xs-12 col-sm-2">动态配置日期:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-dynamic-date" class="form-control datetimepicker" 
                   name="row[dynamic_date]" type="text" 
                   data-date-format="YYYY-MM-DD" 
                   data-use-current="true">
            <span class="help-block">从控制器动态获取可选日期</span>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>

<script>
define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
    
    var Controller = {
        index: function () {
            // 从控制器传递的配置
            var dateConfigs = {$dateConfigs|raw};
            
            // 初始化表单
            Form.api.bindevent($("form[role=form]"));
            
            // 初始化各种日期选择器
            this.initDatePickers(dateConfigs);
        },
        
        initDatePickers: function(configs) {
            // 指定日期配置
            if (configs.specific_dates) {
                $('#c-specific-date').attr('data-restriction-config', 
                    JSON.stringify(configs.specific_dates));
            }
            
            // 禁用特定日期配置
            if (configs.disabled_dates) {
                $('#c-disabled-date').attr('data-restriction-config', 
                    JSON.stringify(configs.disabled_dates));
            }
            
            // 动态配置
            if (configs.dynamic_config) {
                $('#c-dynamic-date').attr('data-restriction-config', 
                    JSON.stringify(configs.dynamic_config));
            }
            
            // 初始化所有日期选择器
            $('.datetimepicker').each(function() {
                var $this = $(this);
                var config = $this.data('restriction-config');
                
                if (config) {
                    // 使用自定义日期选择器
                    $this.restrictedDatetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn',
                        restrictionConfig: config
                    });
                } else {
                    // 使用默认日期选择器
                    $this.datetimepicker({
                        format: 'YYYY-MM-DD',
                        locale: 'zh-cn'
                    });
                }
            });
        }
    };
    
    return Controller;
});
</script>